<template>
    <div id="leftup" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import { onMounted, defineProps, watch, nextTick } from 'vue';
  import * as echarts from 'echarts';
  
  // 定义 props，接收父组件传递的数据
  const props = defineProps({
    childData2: Array
  });
  
  let myChart = null; // 存储 ECharts 实例
  
  const initECharts = () => {
    const echartsContainer = document.getElementById("leftup");
    if (myChart) {
      // 如果已经存在 ECharts 实例，则先销毁它
      myChart.dispose();
    }
    // 初始化 ECharts 实例
    myChart = echarts.init(echartsContainer);
    // 检查childData1是否已定义
    if (!props.childData2 || props.childData2.length === 0) {
      console.warn('childData1 is not ready yet.');
      return; // 如果数据未准备好，直接返回不执行后续逻辑
    }

    const years = [];
    const totalSales = [];
    props.childData2.forEach(item => {
      years.push(item.date_str);
      totalSales.push(item.total_sales);
    });
    const option = {
    backgroundColor: ""
    ,
    grid: {
        top: '20%',
        left: '10%',
        right: '10%',
        bottom: '15%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: years,
        axisLabel: {
            margin: 30,
            color: '#61649f'
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: true,
            length: 25,
            lineStyle: {
                color: "#61649f"
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ffffff1f'
            }
        }
    },
    yAxis: [{
        type: 'value',
        position: 'right',
        axisLabel: {
            margin: 20,
            color: '#61649f'
        },

        axisTick: {
            show: true,
            length: 15,
            lineStyle: {
                color: "#61649f",
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ffffff1f'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#fff',
                width: 2
            }
        }
    }],
    series: [{
        name: '注册总量',
        type: 'line',
        smooth: true, //是否平滑曲线显示
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
            normal: {
                color: "#fff", // 线条颜色
            },
        },
        label: {
            show: true,
            position: 'top',
            textStyle: {
                color: '#5e616d',
            }
        },
        itemStyle: {
            color: "red",
            borderColor: "#fff",
            borderWidth: 3
        },
        tooltip: {
            show: false
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#eb64fb'
                    },
                    {
                        offset: 1,
                        color: '#3fbbff0d'
                    }
                ], false),
            }
        },
        data: totalSales
    }]
};
    myChart.setOption(option);
  };
  
  // 修改onMounted钩子
  onMounted(async () => {
    await nextTick(); // 等待DOM更新
    initECharts();
  });
  
  // 修改watcher回调，添加async并使用nextTick
  watch(() => props.childData2, async () => {
    await nextTick(); // 等待DOM更新
    initECharts();
  }, { immediate: true });
  
</script>